<template>
  <div class="advertisingPush">
    <div class="top">
      <div>
        <img :src="datas.src" @click="height()">
        <span @click="back()">
          <yd-icon name="pushBack" slot="icon" custom></yd-icon>
        </span>
      </div>
      <div>
        <p>{{datas.title}}</p>
      </div>
    </div>
    <div>
      <div>
        <div>
          <img :src="datas.userPic">
        </div>
        <div>
          <yd-icon name="fivePonintedStar" slot="icon" custom size="0.24rem" v-for="(i,index) in datas.num"
                   :key="index"></yd-icon>
        </div>
      </div>
      <div>
        <span>距你:{{Math.ceil(distance)}}米</span>
        <span>步行:{{Math.ceil(duration / 60)}}分钟</span>
      </div>
    </div>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
      <bm-view class="map">
      </bm-view>
      <!--<bm-walking-->
      <!--:start="center"-->
      <!--:end="end"-->
      <!--@searchcomplete="handleSearchComplete"-->
      <!--:panel="false"-->
      <!--:autoViewport="false"-->
      <!--stroke-color="red"-->
      <!--:selectFirstResult="true" style="display: none">-->
      <!--</bm-walking>-->
      <bm-polyline
        :path="path"
        strokeStyle="solid"
        strokeColor="#ba5a45"
        :strokeWeight="4"
        :strokeOpacity="1"></bm-polyline>
      <bm-marker :position="end"
                 :offset="{width:4,height:-16}"
                 :zIndex=200
                 :clicking="false"
                 :dragging="false"
                 animation="BMAP_ANIMATION_BOUNCE"
                 :icon="{url: 'static/img/end.png', size: {width: 35, height: 34}}"></bm-marker>
      <bm-marker :position="center"
                 :offset="{width:8,height:-4}"
                 :zIndex=200
                 :clicking="false"
                 :dragging="false"
                 animation="BMAP_ANIMATION_BOUNCE"
                 :icon="{url: 'static/img/character.png', size: {width: 35, height: 34}}"></bm-marker>
    </baidu-map>
    <div class="audio">
      <div>
        <yd-icon name="refresh" slot="icon" custom size="0.4rem"></yd-icon>
      </div>
      <div :style="{background:color.bg,borderColor:color.border}" @touchstart="start()" @touchend="ends()">
        <yd-icon name="speak" slot="icon" custom :color="color.color"></yd-icon>
      </div>
      <div @touchend="msgList()">
        <yd-icon name="write" slot="icon" custom size="0.4rem"></yd-icon>
      </div>
    </div>
    <div class=issueContent   :style="{height:contentHeight}">
      <span @click="height()">
          <yd-icon name="packUp" slot="icon" color="#fff" custom size="0.5rem"></yd-icon>
        </span>
      <div>
        <span style="padding-bottom: 0.5rem">{{datas.content}}</span>
        <div v-for="(item,index) in datas.contents" :key="index">
          <div>
            <img :src="datas.userPic">
          </div>
          <div>
            <p v-if="item.text!=null" style="line-height: 0.5rem">{{item.text}}</p>
            <img v-if="item.url!=null&&item.url.indexOf('jpg')!=-1" :src="ip+item.url">
            <div class="issueAudio" @click="audioPlay(index)" v-if="item.url!=null&&item.url.indexOf('mp3')!=-1" style="width: 70%;
            height: 0.6rem;color: black;padding-left: 0.5rem;
            border-radius: 0.2rem">
            </div>
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div v-show="show">
        <span @click="text_show()">
          <yd-icon :name="textName" slot="icon" custom></yd-icon>
        </span>
        <div v-show="textShow" contenteditable="true" id="text" v-model="text"></div>
        <div v-show="!textShow"  @touchstart="audioStart($event.target)" @touchend="audioStop($event.target)" style="text-align: center">
          <yd-icon name="issueAudio" slot="icon" size="1.3rem"  custom></yd-icon>
        </div>
        <span @click="image()">
          <yd-icon name="image" slot="icon" custom></yd-icon>
        </span>
        <span @click="contajax()">发送</span>
      </div>
    </div>
  </div>
</template>
<script>
  import {Icons} from 'vue-ydui/dist/lib.rem/icons'
  import {BmlLushu} from 'vue-baidu-map'
  import {mapState} from 'vuex'
  import {startReady, stopReady} from '@/common/js/base/issueAudio.js'
  import $ from 'jquery'
  import phone from '@/common/js/base/issueCover.js'
  import {upload} from '@/common/js/base/upload.js'

  export default {
    components: {
      'yd-icon': Icons,
      BmlLushu
    },
    data() {
      return {
        ip: null,
        show: false,
        color: {
          bg: '#ffffff',
          border: '#EF8356',
          color: '#ef8356'
        },
        datas: {
          src: require('components/img/thumb_raw_1510990121.png'),
          userPic: 'static/img/visiter.png',
          num: 2,
          title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
        },
        center: {
          lng: 104.188148,
          lat: 30.568834
        },
        end: {
          lng: 104.199539,
          lat: 30.569967
        },
        zoom: 16,
        play: true,
        path: [],
        duration: null,   //两点之间时间，单位秒
        distance: null,    //两点之间距离，单位米
        contentHeight: 0,    //商品详细介绍区域
        text: null,
        imgs: [],
        data: null,
        textName:'issueAudio',  //下方文本输入切换按钮
        textShow:true
      }
    },
    methods: {
      back() {
        this.$router.back(-1)
      },
      handler({BMap, map}) {
//        console.log(BMap,map)
//        map.centerAndZoom(new BMap.Point(this.center.lng,this.center.lat), 16)//重置地图位置
      },
      handleSearchComplete(res) { //暂时用不着

      },
      locations() {
        this.$GPS   //获取定位信息
        this.center.lng = this.$store.state.locations.lng;
        this.center.lat = this.$store.state.locations.lat;
      },
      ajax() {
        let th = this
        //调取步行导航路线
        var data = {
          origin: this.center.lat + ',' + this.center.lng,
          destination: this.end.lat + ',' + this.end.lng,
          mode: 'walking',
//          region:this.locations.province,// 当前城市  上线后使用该参数
          region: '四川',
          output: 'json',
          ak: 'ijewSqouNieNAOHC9nRj7ZB3HjL6FjP1'
        };
        $.ajax({
          type: '',
          url: "http://api.map.baidu.com/direction/v1",
          dataType: 'jsonp',
          data: data,
          success: function (result) {
            ss(result.result.routes[0])
          },
        });
        let path = [];

        function ss(t) {
          //对百度地图API步行导航返回的坐标数据进行重新筛选排序
          let s = t.steps;
          for (var i = 0; i < s.length; i++) {
            var arr = s[i].path.split(';');
            for (var n = 0; n < arr.length; n++) {
              var ars = arr[n].split(',');
              var obj = {
                lng: ars[0],
                lat: ars[1]
              };
              path.push(obj)
            }
          }
          th.duration = t.duration;
          th.distance = t.distance
        }

        this.path = path;
      },
      start() {
        this.color.bg = '#ef8356';
        this.color.border = '#ffffff';
        this.color.color = '#ffffff';
      },
      ends() {
        this.color.bg = '#ffffff';
        this.color.border = '#ef8356';
        this.color.color = '#ef8356';
      },
      msgList() {
        this.$router.push({name: 'latestMsg'})
      },
      issue: function () {
        let content = this.$route.query.id;
        if (content.userID == localStorage.userid) {
          this.show = true

        } else {
          this.show = false
        }
//        alert(content.userID)
//        alert(localStorage.userid)
        this.end.lng = content.userLng;
        this.end.lat = content.userLat;
        content.userPic = content.user.photo;
        content.content = content.cardContents[0].text;
        content.contents = content.cardContents;
        content.contents.splice(0, 1);
        content.num = 2;
        if (content.userPic.indexOf('static') == -1) {
          content.userPic = content.userPic
        }
        ;
        this.datas = content;

        console.log(content)
      },
      height: function () {
//        alert('2')
        if (this.contentHeight == 0) {
          this.contentHeight = "67.5%"
        } else {
          this.contentHeight = 0
        }

      },
      image: function () {
        let th = this;
        phone.showActionSheet();
        let time = setInterval(() => {
          if (this.$store.state.issueCover !== null) {
            let e = {
              path: this.$store.state.issueCover,
              name: 'abc.jpg',
              type: 'image'
            };
            upload(e, url=> {
              let data = {
                content: JSON.stringify([{
                  'cardID': this.datas.sCardID,
                  'text': null,
                  'url': url,
                  'fileType': 1
                }])
              };
              this.$options.methods.https(data, this);
              th.datas.contents.push({
                'cardID': th.datas.sCardID,
                'text': null,
                'url': url
              });
            });
            clearInterval(time);
          }
        })
      },
      contajax: function () {
        let th = this;
        let text = document.getElementById('text');
        let data = {
          content: JSON.stringify([{
            'cardID': this.datas.sCardID,
            'text': text.innerText,
            'url': null
          }])
        };
        this.data = {
          'cardID': this.datas.sCardID,
          'text': text.innerText,
          'url': null
        };

        th.datas.contents.push({
          'cardID': th.datas.sCardID,
          'text': text.innerText,
          'url': null
        });
        th.$options.methods.https(data, th);
      },
      audioStart: function (e) {
        e.style.background = '#2c2c2c';
        startReady()
      },
      audioStop: function (e) {
        e.style.background = '#ffffff';
        let th = this;
        var fil = function (e) {
          upload(e,url=>{
            url = url.replace("\\\\", "\/\/");
            url = url.replace("\\", "\/");
            url = url.replace("\\", "\/");

            let data = {
              content: JSON.stringify([{
                'cardID': th.datas.sCardID,
                'text': null,
                'url': url,
                'fileType': 2
              }])
            };

            th.$options.methods.https(data, th);
            th.datas.contents.push({
              'cardID': th.datas.sCardID,
              'text': null,
              'url': url
            });
            console.log(url);
          });
        };
        stopReady(fil);
      },
      https: function (data, th) {
        th.ylAjax.cardContentList(data).then(msg => {

          if (msg.data === true) {
            let text = document.getElementById('text');

            text.innerText = null
          }
        });
      },
      audioPlay: function (index) {
        var audio = document.createElement('audio');
        audio.src = this.ip + this.datas.contents[index].url;
        console.log(audio);
        audio.play()
      },
      text_show: function () {
        if(this.textShow){
          this.textShow = false;
          this.textName = 'issueText';
        }else {
          this.textShow = true;
          this.textName = 'issueAudio';
        }
      },
    },
//    computed:mapState(["locations"]),
    activated() {
      this.ip = this.$store.state.ip;
      window.time = setInterval(this.locations, 500);
      setTimeout(this.ajax, 1000);
      this.issue();
    },
    deactivated() {
      clearInterval(window.time);
      this.text = null;
      this.$store.commit("issueCover", null);
      this.contentHeight = 0;
      this.imgs = []
    },
    watch: {
      center: {  //监控当前位置坐标，如果更新重新调取百度地图步行导航API
        aj(newValue, oldValue) {
          console.log(newValue)
          this.ajax()
        },
        deep: true
      }
    },
  }
</script>
<style lang="less" scoped>
  @import "~less/base";

  .advertisingPush {
    position: absolute;

    z-index: 40;
    top: 0;
    height: 100%;
    width: 100%;
    background: @advertisionPush-bg;
    overflow: hidden;
    .top {
      height: 4rem;
      /*position: relative;*/
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 1;
      > div:nth-child(1) {
        height: 100%;
        > img {
          width: 100%;
          height: 100%;
        }
        > span {
          position: absolute;
          top: 0.23rem;
          right: 0.21rem;
          > i {
            color: @advertisionPush-bg;
          }
        }

      }
      > div:nth-child(2) {
        position: absolute;
        bottom: 0;
        z-index: 32;
        height: 0.7rem;
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
        color: @push-FontSize;
        > p {
          margin-left: 0.2rem;
          margin-right: 2.15rem;
          font-size: 16px;
          line-height: 0.7rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
    > div:nth-child(2) {
      height: 0.62rem;
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 4rem;
      background: @advertisionPush-bg;
      > div:nth-child(1) {
        position: absolute;
        z-index: 33;
        right: 0.08rem;
        bottom: -0.3rem;
        height: 1.54rem;
        width: 1.98rem;
        border: 0.02rem solid @advertisionPush-icon;
        background: white;
        > div:nth-child(1) {
          width: 100%;
          height: 1.18rem;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        > div:nth-child(2) {
          > i {
            color: #faa71b;
            margin-left: 0.1rem;
          }
        }
      }
      > div:nth-child(2) {
        height: 0.5rem;
        > span {
          font-size: 14px;
          line-height: 0.6rem;
        }
        > span:nth-child(1) {
          float: left;
          margin-left: 0.2rem;
        }
        > span:nth-child(2) {
          float: right;
          margin-right: 2.15rem;
        }
      }
    }
    > div:nth-child(3) {
      height: 100%;
      .map {
        height: 68%;
        width: 100%;
        position: absolute !important;
        bottom: 0;
      }
    }
    .audio {
      width: 80%;
      height: 1.74rem;
      margin-left: 50%;
      transform: translateX(-50%);
      position: fixed;
      bottom: 0.64rem;
      > div {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        float: left;
        width: 0.9rem;
        height: 0.9rem;
        background: #EF8356;
        border-radius: 50%;
        border: 1px solid #ffffff;
        color: #ffffff;
        line-height: 0.9rem;
        text-align: center;
      }
      > div:nth-child(1) {
        left: 15%;
      }
      > div:nth-child(3) {
        right: 15%;
      }
      > div:nth-child(2) {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 1.76rem;
        height: 1.76rem;
        border: 0.04rem solid #c;
        border-radius: 50%;
        text-align: center;
        background: @color-btnBack1;
        > i {
          line-height: 1.66rem;
          color: #ef8356;
        }
      }
    }
    .issueContent {
      width: 100%;
      /*height: 64%;*/
      background: #292929;
      position: absolute;
      /*bottom: 0;*/
      top: 4.3rem;
      transition: 0.5s;
      overflow: hidden;
      > span {
        position: absolute;
        top: 0.3rem;
        left: 0.3rem;
      }
      > div:nth-child(2) {
        margin-top: 1rem;
        /*width: 100%;*/
        height: 88%;
        color: white;
        overflow-y: scroll;
        padding-bottom: 1.5rem;
        > span:nth-child(1) {
          display: inline-block;
          /*width: 90%;*/
          /*margin-left: 50%;*/
          /*transform: translateX(-50%);*/
          word-break: break-all;
          text-indent: 2em;
          /*word-warp:warp;*/
        }
        > div {
          margin-bottom: 0.3rem;
          overflow: hidden;
          > div {
            float: left;
          }
          > div:nth-child(1) {
            width: 15%;
            margin-left: 0.3rem;
            > img {
              width: 0.7rem;
              height: 0.7rem;
            }
          }
          > div:nth-child(2) {

            width: 70%;

            > img {
              width: 5rem;
              height: 5rem;
            }
            > p {
              min-height: 1rem;
              border-radius: 0.1rem;
              background: white;
              color: black;
              padding-left: 0.2rem;
              line-height: 0.3rem;
            }
          }
        }
      }
      > div:nth-child(3) {
        height: 18.8%;
        width: 100%;
        background: white;
        position: absolute;
        bottom: 0;
        > span:nth-child(1) {
          position: absolute;
          padding-top: 0.5rem;
          width: 1rem;
          height: 100%;
          padding-left: 0.2rem;
        }
      ;
        > span:nth-child(1):active {
          background: #767676;
          > i {
            color: white;
          }
        }
        > div {
          margin-left: 1rem;
          overflow: scroll;
          width: 70%;
          height: 100%;
          border: 1px solid #c2c2c2;
          font-size: 14px;
          > img {
            width: 50px;
            height: 50px;
          }
        }
        > span:nth-child(4) {
          position: absolute;
          top: 10%;
          right: 0.5rem;
          width: 0.5rem;
          height: 100%;
          margin-left: 0.2rem;
        }
      ;
        > span:nth-child(5) {
          position: absolute;
          top: 60%;
          width: 12%;
          height: 0.5rem;
          right: 0.2rem;
          line-height: 0.5rem;
          text-align: center;
          border-radius: 0.1rem;
          margin-left: 0.15rem;
          background: #EF8356;
          color: white;
        }
      }
      .issueAudio {
        background: url("img/ramr.png") white no-repeat 3rem 0.1rem;
        background-size: 0.4rem;
        /*background-position: right;*/
      }
    }
  }
</style>
